<template>
	<view>
		<view class="contentAll">
			<view style="display: flex;align-items: center;">
				<image :src="headImg"
					style="height: 112rpx;width: 112rpx;border-radius: 50rpx;margin: 30rpx;" />
				<view style="flex:1;display: flex;flex-direction: column;">
					<view style="display: flex;justify-content: space-between;width: 100%;" >
						<view class="contentB" @click="toLogin">
							{{ userName }}
						</view>
						<view class="setting" @click="toMySetting"><image src="/static/设置.png" class="setting"/></view>
					</view>
					<view style="margin-top: 20rpx;"><text class="contentUser">{{ userLevel }}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: -60rpx;display: flex;justify-content: center;">
			<view class="ZIcon" @click="toWarrantyEntry">
				<!-- <image src="/static/质保录入-icon.png" class="ZIcon" /> -->
				<text class="content1">质保录入</text>
			</view>
			<view class="content2" @click="applyShop">
				<!-- <image src="/static/授权店申请-icon.png" class="content2" /> -->
				<text class="content3">授权店申请</text>
			</view>

		</view>
		<view class="contentPic">
			<view style="display: flex;flex-direction: column;">
				<view class="picP" @click="toMyCollection">
					<view style="display: flex;justify-content: center;align-items: center;">
						<image src="/static/我的收藏.png" class="picShow" />
						<text class="contentC">我的收藏</text>
					</view>
					<view>
						<image src="/static/向右.png" class="right" />
					</view>
				</view>
				<view class="picP" @click="toMyCase">
					<view style="display: flex;justify-content: center;align-items: center;">
						<image src="/static/案例提供.png" class="picShow" />
						<text class="contentC">案例提供</text>
					</view>
					<view>
						<image src="/static/向右.png" class="right" />
					</view>
				</view>
				<view class="picP" @click="toRights">
					<view style="display: flex;justify-content: center;align-items: center;">
						<image src="/static/授权店权益.png" class="picShow" />
						<text class="contentC">授权店权益</text>
					</view>
					<view>
						<image src="/static/向右.png" class="right" />
					</view>
				</view>
				<view class="picP" @click="toMyProblem">
					<view style="display: flex;justify-content: center;align-items: center;">
						<image src="/static/常见问题.png" class="picShow" />
						<text class="contentC">常见问题</text>
					</view>
					<view>
						<image src="/static/向右.png" class="right" />
					</view>
				</view>
				<view class="picP" @click="toLink">
					<view style="display: flex;justify-content: center;align-items: center;">
						<image src="/static/联系我们.png" class="picShow" />
						<text class="contentC">联系我们</text>
					</view>
					<view>
						<image src="/static/向右.png" class="right" />
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<u-tabbar v-model="nav_current" :list="nav_list" active-color='#2C2C2C' height="100"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				tabNav: ['关于我们', '联系我们'],
				headImg:'https://hbimg.b0.upaiyun.com/09160cecd4af5659819ce2222adda0d2b59b39167397-6JoPxk_fw658',
				userName:'立即登录',
				userLevel:'点击登录享受更多精彩',
				nav_list: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/death/nav/home.png",
						selectedIconPath: "/static/death/home-selected.png",
						text: '首页'
					},
					{
						pagePath: "/pages/car/case",
						iconPath: "/static/death/nav/case.png",
						selectedIconPath: "/static/death/nav/case-selected.png",
						text: '案例'
					},
					{
						pagePath: "/pages/car/quote",
						iconPath: "/static/death/nav/price.png",
						selectedIconPath: "/static/death/nav/price-selected.png",
						text: '报价'
					},
					{
						pagePath: "/pages/product/product",
						iconPath: "/static/death/nav/brand.png",
						selectedIconPath: "/static/death/nav/brand-selected.png",
						text: '品牌'
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/death/nav/mine.png",
						selectedIconPath: "/static/death/nav/mine-selected.png",
						text: '我的'
					},
				], // 底部导航
				nav_current: 5,
				// 文字提示
				// errorType: ['toast'],
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		methods: {
			toWarrantyEntry(){
				if(!this.$store.state.vuex_token){
					uni.navigateTo({
						url: '/pages/my/compontents/login'
					})
				}else{
					uni.navigateTo({
						url: '/pages/write/write'
					})
				}
			},
			toMyCase(){
				uni.navigateTo({
					url: '/pages/my/compontents/myCase'
				})
			},
			toLogin(e){
				const token = this.$store.state.phone_login_token;
				if(token===null||token==='')
				uni.navigateTo({
					url: '/pages/my/compontents/wxLogin'
				})
			},
			toMyCollection(e){
				uni.navigateTo({
					url: '/pages/my/compontents/myCollection'
				})
			},
			toMySetting(){
				uni.navigateTo({
					url: '/pages/my/compontents/mySetting'
				})
			},
			toMyProblem(e){
				uni.navigateTo({
					url: '/pages/my/compontents/myProblem'
				})
			},
			toRights(e){
				uni.navigateTo({
					url: '/pages/my/rights/rights'
				})
			},
			//tab切换
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			//提交表单
			async formSubmit(e) {
				var formdata = e.detail.value
				// uni.showModal({
				//     content: '表单数据内容：' + JSON.stringify(formdata),
				//     showCancel: false
				// });
				formdata.diyname = 3;
				console.log(formdata);
				let res = await this.$api.postForm(formdata);
				console.log(res);
				if (!res.code) {
					return;
				}
				uni.showToast({
					icon: "success",
					title: '留言成功'
				})
			},
			async getPageAbout() {
				let userMessage = this.$store.state.user_message;
				if(this.$store.state.phone_login_token){
					const { nickName,avatar } = JSON.parse(userMessage);
					this.userName = nickName;
					this.userLevel = '欢迎来到膜品天下，愿您有个美好体验！';
					if(avatar)this.headImg = avatar;
				}
			},
			applyShop(){
				uni.navigateTo({url: '/pages/my/applyShop'});
			},
			toLink(){
				uni.navigateTo({
					url: '/pages/about/contact'
				})
			},
		},
		onShow() {
			this.getPageAbout();
		}
	}
</script>

<style scoped>
	.picShow {
		margin-left: 30rpx;
		margin-right: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.contentPic {
		width: 90%;
		height: 552rpx;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 32rpx;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.content2 {
		width: 100%;
		background: linear-gradient(180deg, #FFFEE6 0%, #FFF0E6 100%);
		width: 320rpx;
		height: 104rpx;
		box-shadow: 0rpx 6rpx 6rpx 2rpx rgba(0, 0, 0, 0.02);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		background-repeat: no-repeat;
		text-align: center;
		align-items: center;
		background-size: cover;
		background-image: url('/static/授权店申请-icon.png')
	}

	.content1 {
		position: absolute;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		text-align: center;
		align-items: center;
		margin-left: 140rpx;
	}

	.right {
		width: 30rpx;
		height: 30rpx;
		margin-right: 32rpx;
	}

	.picP {
		width: 686rpx;
		height: 104rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		max-width: 100%;
		min-width: 100%;
	}

	.picP:active {
		background-color: rgba(0, 0, 0, 0.05);
	}

	.contentC {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.contentUser {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.ZIcon {
		width: 100%;
		width: 320rpx;
		height: 104rpx;
		margin-right: 25rpx;
		background: linear-gradient(180deg, #E6FFF8 0%, #E6F2FF 100%);
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		background-repeat: no-repeat;
		text-align: center;
		align-items: center;
		background-size: cover;
		background-image: url('/static/质保录入-icon.png')
	}

	.setting {
		margin-left: auto;
		margin-right: 50rpx;
		width: 33rpx;
		height: 33rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.contentAll {
		height: 466rpx;
		width: 100%;
		padding-top: 148rpx;
		/* background-color: #FBCB11; */
		background-image: url('https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/64f3fc5b7c0f4c1cbc87121270966bb4.png');
		background-repeat: no-repeat;
		background-size: cover;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.contentB {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.content3 {
		position: absolute;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		text-align: center;
		align-items: center;
		margin-left: 140rpx;
	}
</style>